import 'package:fluter_order/api/order.dart';
import 'package:fluter_order/utils/RequestDio.dart';
import 'package:fluter_order/utils/auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'components/order_tab_bar.dart';
import 'components/order_item.dart';

/// 订单页面 StatefulWidget 类
///
/// 该类用于展示用户的订单信息，包含多个订单状态的 Tab 切换，
/// 每个 Tab 对应不同状态的订单列表。
class OrderPage extends StatefulWidget {
  /// 构造函数
  ///
  /// [key] 用于控制 widget 在树中的标识。
  const OrderPage({super.key});

  @override
  State<OrderPage> createState() => _OrderPageState();
}

/// 订单页面状态类
///
/// 管理订单页面的状态，包括 Tab 控制器、订单数据以及页面构建逻辑。
class _OrderPageState extends State<OrderPage>
    with SingleTickerProviderStateMixin {
  /// Tab 控制器，用于控制 TabBar 和 TabView 的切换
  late TabController _tabController;

  /// 定义 Tab 标题列表
  final List<String> _tabs = ['全部', '待付款', '待发货', '待收货', '待评价'];

  /// 模拟订单数据列表
  ///
  /// 每一项代表一个订单，包含订单的基本信息和商品详情。
  List<Map<String, dynamic>> _orderList = [];

  /// 创建一个MethodChannel实例用于与原生平台进行通信
  ///
  /// 该channel使用'mk_project'作为唯一标识符，用于在Flutter Dart代码
  /// 和原生Android/iOS代码之间传递方法调用和数据
  final _platform = const MethodChannel('mk_project');

  /// 初始化状态
  ///
  /// 创建 TabController 实例，并设置其长度与 tab 数量一致。
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
    _getToken();
  }

  /// 获取并显示token
  /// 该函数通过平台通道异步获取token，并将获取到的token显示出来。
  ///
  /// 主要功能：
  /// 1. 调用原生平台【鸿蒙端的】"getToken"方法获取token
  /// 2. 将获取到的token存储到TokenManager中
  /// 3. 调用原生平台【鸿蒙端的】的"showMessage"方法显示token
  _getToken() async {
    String token = await _platform.invokeMethod("getToken");
    if (token.isNotEmpty) {
      TokenManager.token = token;
      // 调用接口获取数据‘
      _getOrderList();
    }
  }

  Map<String, dynamic> params = {"page": 1, "pageSize": 10, "orderState": 0};
  _getOrderList() async {
    try {
      final res = await getOrderListAPI(params);
      setState(() {
        // 将响应数据中的items字段转换为Map<String, dynamic>类型的列表
        // 此操作用于将网络请求返回的JSON数据解析为本地可用的数据结构
        // res['items']应包含订单项的数组数据，每个元素都是一个Map对象
        _orderList = List<Map<String, dynamic>>.from(res['items']);
      });
    } catch (e) {
      _platform.invokeMethod("showMessage", e.toString());
    }
  }

  /// 显示消息函数
  /// 通过调用原生平台的showMessage方法来显示一条"hello flutter"消息
  _showMessage() {
    /**
     * 调用平台特定的方法
     * 
     * 该函数通过_methodChannel与原生平台进行通信，调用指定的平台方法并传递参数。
     * 
     * @param method 要调用的平台方法名称
     * @param arguments 传递给平台方法的参数，可选参数，默认为null
     * 
     * @returns 返回平台方法执行结果的Future对象，类型为dynamic
     */
    _platform.invokeMethod("showMessage", 'hello flutter');
  }

  /// 销毁状态
  ///
  /// 释放 TabController 资源，防止内存泄漏。
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  /// 构建订单页面 UI
  ///
  /// 页面结构包括顶部 TabBar 和下方订单列表。
  /// 使用 ListView.builder 构建可滚动的订单项列表。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: Column(
        children: [
          // 渲染订单 TabBar
          OrderTabBar(
            tabs: _tabs,
            controller: _tabController,
          ),
          TextButton(
              onPressed: () {
                _showMessage();
              },
              child: Text('点击')),
          // 渲染订单列表
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              itemCount: _orderList.length,
              itemBuilder: (context, index) {
                return OrderItem(
                  orderInfo: _orderList[index],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
